<script lang="ts" setup>
import { NumStatus } from "@/enums/number.enum";

const visible = defineModel<boolean>("visible", {
    default: false
});

const props = withDefaults(
    defineProps<{
        sellerId: number | string;
        sellerName: string;
        province: string;
    }>(),
    {
        sellerId: "",
        sellerName: "",
        province: ""
    }
);

const ownedList = ref<any[]>([]);
const avaList = ref<any[]>([]);

const addList = ref<any[]>([]);
const remList = ref<any[]>([]);

const getSellerOwnedNumber = async () => {
    try {
        const { success, data } = await numberClient.assignedNumbersApi(props.sellerId);
        if (success) {
            ownedList.value = data || [];
        }
    } catch (error) {
        console.log(error);
    }
};

const getAvailableNumber = async () => {
    try {
        const { success, data } = await numberClient.availableNumbersApi();
        if (success) {
            avaList.value = data || [];
        }
    } catch (error) {
        console.log(error);
    }
};

const handleRemoveClick = (item: any) => {
    if (item.status !== NumStatus.ASSIGNED) return;
    const index = remList.value.findIndex((d) => d.id === item.id);
    if (index !== -1) {
        remList.value.splice(index, 1);
    } else {
        remList.value.push(item);
    }
};

const handleAddClick = (item: any) => {
    const index = addList.value.findIndex((d) => d.id === item.id);
    if (index !== -1) {
        addList.value.splice(index, 1);
    } else {
        addList.value.push(item);
    }
};

const getOwnTagType = (item: any) => {
    const index = remList.value.findIndex((d) => d.id === item.id);
    if (index >= 0) return "info";

    if (item.status === NumStatus.LOCKED) {
        return "danger";
    }

    if (item.status === NumStatus.FINISHED) {
        return "primary";
    }

    return "success";
};

const getAddTagType = (item: any) => {
    const index = addList.value.findIndex((d) => d.id === item.id);
    if (index >= 0) return "success";

    return "info";
};

watch(
    () => visible.value,
    (newVal) => {
        if (newVal) {
            getAvailableNumber();
            getSellerOwnedNumber();
        } else {
            addList.value = [];
            remList.value = [];
            avaList.value = [];
            ownedList.value = [];
        }
    }
);

const handleSubmit = async () => {
    let confirm;
    try {
        confirm = await ElMessageBox.confirm("确定执行此操作？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "info"
        });
    } catch (_error) {
        confirm = false;
    }

    if (!confirm) return;

    try {
        const { success } = await numberClient.batchAssignApi(
            props.sellerId,
            addList.value.map((d) => d.id),
            remList.value.map((d) => d.id)
        );
        if (success) {
            ElMessage.success("分配成功");
            visible.value = false;
        } else {
            ElMessage.error("分配失败");
        }
    } catch (error) {
        console.log(error);
        ElMessage.error("分配失败");
    }
};
</script>
<template>
    <el-drawer
        v-model="visible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="`分配杆号 - ${props.province} - ${props.sellerName}`"
        size="1220px"
    >
        <div class="h-full overflow-y-auto overflow-x-hidden">
            <div class="pi">
                <div class="ttext">
                    <el-text type="primary">已分配杆号</el-text>
                    <div class="desc">
                        <div class="desc__item">
                            <div class="desc__item__color bg-[var(--el-color-danger)]"></div>
                            <span>已绑定订单</span>
                        </div>
                        <div class="desc__item">
                            <div class="desc__item__color bg-[var(--el-color-primary)]"></div>
                            <span>订单已完成</span>
                        </div>
                        <div class="desc__item">
                            <div class="desc__item__color bg-[var(--el-color-info)]"></div>
                            <span>将移出分配</span>
                        </div>
                        <div class="desc__item">
                            <div class="desc__item__color bg-[var(--el-color-success)]"></div>
                            <span>未绑定订单，点击可解除分配</span>
                        </div>
                    </div>
                </div>

                <div class="owned">
                    <el-tag
                        effect="dark"
                        :type="getOwnTagType(item)"
                        v-for="item in ownedList"
                        :key="item.id"
                        @click="handleRemoveClick(item)"
                        disable-transitions
                        >{{ item.num }}</el-tag
                    >
                </div>
            </div>
            <div class="pi">
                <div class="ttext">
                    <el-text type="info">可分配杆号</el-text>
                    <div class="desc">
                        <div class="desc__item">
                            <div class="desc__item__color bg-[var(--el-color-info)]"></div>
                            <span>可分配杆号</span>
                        </div>
                        <div class="desc__item">
                            <div class="desc__item__color bg-[var(--el-color-success)]"></div>
                            <span>已选择杆号</span>
                        </div>
                    </div>
                </div>
                <div class="owned">
                    <el-tag
                        effect="dark"
                        :type="getAddTagType(item)"
                        v-for="item in avaList"
                        :key="item.id"
                        @click="handleAddClick(item)"
                        disable-transitions
                        >{{ item.num }}</el-tag
                    >
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<style lang="scss" scoped>
.pi + .pi {
    margin-top: 20px;
}
.ttext {
    font-size: 16px;
    margin-bottom: 10px;
    .el-text {
        font-size: inherit;
    }
}
.owned {
    border: 1px solid var(--el-border-color);
    padding: 15px;
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 标签间距，可调整 */

    .el-tag {
        flex: 0 0 80px; /* 15个一行，间距为8px */
        box-sizing: border-box;
        cursor: pointer;
        text-align: center;
        margin-bottom: 10px;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        &:nth-last-child(-n + 15) {
            margin-bottom: 0;
        }
    }
}

.desc {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    font-size: 14px;
    margin: 10px 0 15px;
    .desc__item {
        display: flex;
        align-items: center;
        gap: 5px;
        .desc__item__color {
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
        }
    }
}
</style>
